﻿@namespace MudBlazor.Docs.Examples

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 ml-2 mr-auto mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mr-2 ml-auto mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-start flex-column py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 my-1 mx-2 mb-auto mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-end flex-column py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mt-auto mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

